import React from "react";
import { Form, Input, Button, Row, Col } from "antd";
import { UserOutlined, LockOutlined, LoadingOutlined, VerifiedOutlined } from "@ant-design/icons";
import { ProBox } from '@yaf/pro-ui';
import { useThemeToken } from "@/constants";

import { useLogin } from './useLogin';

const Login: React.FC = () => {
  const { themeToken } = useThemeToken();
  const { loading, BgImg, submitting, canvasRef, handleSubmit, form, captchaImageInfo, fetchCaptchaImage } = useLogin();

  return <ProBox loading={loading}>
    <div id="backgroundBox" className={`h-full overflow-hidden relative select-none  bg-[length:100%_100%]`} style={{ backgroundImage: `url(${BgImg})` }}>
      <canvas ref={canvasRef} />
      <div
        className="absolute top-[50%] left-[50%] w-[30%] translate-x-[-50%] translate-y-[-60%] rounded-[3px]"
        style={{
          backgroundColor: themeToken.colorBgContainer,
          padding: "30px 30px 0 30px",
          boxShadow: "0 0 10px 2px rgba(40, 138, 204, 0.16)",
        }}>
        <Form form={form}>
          <div className="w-full text-center pb-[5px]">
            <span style={{ fontSize: 25, fontWeight: 500 }}>登录</span>
          </div>
          <Form.Item
            name="loginName"
            rules={[{ required: true, whitespace: true, message: '请填写用户名或手机号!' }]}
          >
            <Input
              size="large"
              autoFocus={true}
              prefix={<UserOutlined />}
              placeholder="用户名或手机号"
              onKeyDown={handleSubmit}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, whitespace: true, message: '请填写密码!' }]}
          >
            <Input.Password
              size="large"
              prefix={<LockOutlined />}
              placeholder="密码"
              onKeyDown={handleSubmit}
            />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[{ required: true, whitespace: true, message: '请填写验证码!' }]}
          >
            <Row gutter={5} align="middle">
              <Col span={18}>
                <Input
                  size="large"
                  prefix={<VerifiedOutlined />}
                  placeholder="验证码"
                  onKeyDown={handleSubmit}
                />
              </Col>
              <Col span={6}>
                <img src={captchaImageInfo.img}
                  style={{ width: "100%", height: 37, cursor: "pointer" }}
                  onClick={fetchCaptchaImage}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Button
              size="large"
              type="primary"
              style={{ width: "100%" }}
              onClick={handleSubmit}
              icon={submitting && <LoadingOutlined />}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  </ProBox>
}

export default Login;

